<template>
  <section>
    <SearchBar>
      <SearchBarItem :label="$t('projectList.projectName')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="searchForm.projectName" allow-clear />
      </SearchBarItem>
      <SearchBarItem last>
        <a-button class="mr-6" type="primary" @click="add">
          <template #icon>
            <plus-outlined />
          </template>
          {{$t('operation.insert')}}
        </a-button>
        <a-button type="primary" @click="search">
          <template #icon>
            <search-outlined />
          </template>
          {{$t('operation.search')}}
        </a-button>
      </SearchBarItem>
    </SearchBar>
    <a-table
      :columns="columns"
      :row-key="record => record.projectId"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template #headerCell="{ column }">
        <template v-for="(item, index) in columns" :key="index">
          <span v-if="column.dataIndex && column.dataIndex === item.dataIndex">
          {{ $t(column.title) }}
          </span>
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <a-button class="mr-4" type="primary" size="small" @click="edit(record)">{{$t('operation.edit')}}</a-button>
          <a-popconfirm
            :title="$t('message.confirm_delete')"
            :ok-text="$t('operation.confirm')"
            :cancel-text="$t('operation.cancel')"
            placement="left"
            @confirm="deleteIt(record)"
          >
            <a-button danger size="small">{{$t('operation.delete')}}</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <ProjectInfoModal v-model:visible="visible" :form="currentProject" @ok="update" />
  </section>
</template>

<script lang="ts" setup>
import type { APIResult } from '@/request'
import { Project } from '@/store/project'
import ProjectInfoModal from './ProjectInfoModal.vue'

const columns = [
  {
    title: 'projectList.projectName',
    dataIndex: 'projectName',
  },

  {
    title: 'projectList.baseUri',
    dataIndex: 'baseUri',
    width: '20%',
  },
  {
    title: 'table.action',
    dataIndex: 'action',
    width: '150px',
  },
]
const searchForm = reactive({
  projectName: void 0
})

const queryData = (params: Record<string, any>): Promise<{ data: APIResult<Project[]> }> => {
  return request.post('/api/dynamic-mock/project/query', { ...params })
}

const { data: dataSource, run, loading, pagination } = usePagination(queryData, { totalKey: 'total' })

const handleTableChange = (pag: { pageSize: number; current: number ;}, filters: any, sorter: any) => {
  Object.assign(searchForm, filters)
  pagination.current=pag.current;
  pagination.pageSize = pag.pageSize
  run({
    // sortField: sorter.field,
    // sortOrder: sorter.order,
    ...searchForm,
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
  })
}

const update = () => {
  run({
    ...searchForm,
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
  })
}

const search = () => {
  pagination.current = 1
  update()
}

search()

const visible = ref(false)
const currentProject = ref()
const add = () => {
  currentProject.value = {}
  visible.value = true
}
const edit = (project: Project) => {
  currentProject.value = toRaw(project)
  visible.value = true
}
const deleteIt = async (project: Project) => {
  await request.post('/api/dynamic-mock/project/del', project)
  // 如果删除的是最后一页的最后一条数据,退回上一页
  const lastPage = Math.ceil(pagination.total / pagination.pageSize)
  if(pagination.current===lastPage&&pagination.total%pagination.pageSize===1) {
    pagination.current--
  }
  update()
}

</script>

<style></style>
